<template>
  <div style="width: 610px;">
    <h3>第二步，完善sku信息</h3>
    <!--sku列表-->
    <div class="list">
      <ul>
        <li v-for="(item, index) in list" :key="index">
          <Avatar :src="base64Data[index]" shape="square" size="large" style="float: left;"></Avatar>
          <div style="float: left;margin-left: 10px;">
            <p>名称：{{ item.goodsSkuName }}</p>
            <p>权重：{{ item.sortWeight }}</p>
          </div>
          <span class="del" @click="delSku(index)"><Icon type="close-round"></Icon></span>
        </li>
      </ul>
    </div>

    <!--sku输入框-->
    <div class="form">
      <Form :model="skuForm" :label-width="80" ref="skuForm" :rules="skuFormRule">
        <FormItem label="sku名称：" prop="goodsSkuName">
          <Input v-model="skuForm.goodsSkuName" placeholder="最多20个字"/>
        </FormItem>
        <FormItem label="sku图片：">
          <div style="overflow: hidden;">
            <div class="img_list" v-if="base64Src">
              <img :src="base64Src" alt="图片" width="58">
              <Icon type="close-circled" color="#ed3f14" size="16" @click="delImage()"></Icon>
            </div>
            <Upload
              v-else
              ref="upload"
              :show-upload-list="false"
              :format="['jpg','jpeg','png']"
              :max-size="2048"
              :before-upload="handleBeforeUpload"
              multiple
              type="drag"
              action="#"
              style="display: inline-block;width:58px;">
              <div style="width: 58px;height:58px;line-height: 58px;">
                <Icon type="camera" size="20"></Icon>
              </div>
            </Upload>
          </div>
          <p><span style="color: #ff9900;">提示：</span>图片大小不超过5M，每个sku一张图片，建议使用方形图片（必须有图片）</p>
        </FormItem>
        <FormItem label="sku权重：" prop="sortWeight">
          <InputNumber v-model="skuForm.sortWeight" :min="0" :max="100"/>
          <p><span style="color: #ff9900;">提示：</span>sku权重决定商品在手机sku选择页的排序，权重值为0~100，默认为0，权重越高排序越靠前</p>
        </FormItem>
        <FormItem :label-width="1">
          <Button type="primary" @click="addToList">增加sku</Button>
        </FormItem>
      </Form>
    </div>

    <!--下一步按钮-->
    <div class="btn">
      <Button @click="toOneStep" type="primary">上一步</Button>
      <Button @click="nextStep" type="ghost">下一步，编辑商品详情</Button>
    </div>
    <image-util :fixed-number="[1, 1]" @cropImg="cropImg" ref="crop"></image-util>
  </div>
</template>

<script>
import imageUtil from '../../common/imageUtil'
export default {
  name: 'sku-step',
  components: {
    imageUtil
  },
  data () {
    return {
      list: [],
      skuForm: {
        goodsSkuName: '',
        sortWeight: 0
      },
      skuFormRule: {
        goodsSkuName: [
          { required: true, message: '商品名称不能为空', trigger: 'blur' }
        ]
      },

      // 图片数据
      base64Src: '',
      nowBlob: null,
      base64Data: [],
      blobData: []
    }
  },
  methods: {
    toOneStep () {
      /*
      * 放回上一步，即spu商品基本信息页面
      * */
      this.$emit('goBack')
    },
    nextStep () {
      /*
      * 进入下一步，编辑商品详情
      * 1、通知父组件进入下一步
      * 2、把sku列表带过去存起来
      * */
      if (this.list[0]) {
        this.$emit('nextStep', {list: JSON.stringify(this.list), images: this.base64Data, blobs: this.blobData})
      } else {
        this.$Message.error('商品必须要有一个sku')
      }
    },

    addToList () {
      this.$refs.skuForm.validate(valid => {
        if (valid && this.base64Src) {
          this.list.push({...this.skuForm})
          this.base64Data.push(this.base64Src)
          this.blobData.push(this.nowBlob)
          this.$refs.skuForm.resetFields()
          this.base64Src = ''
        } else {
          this.$Message.error('sku名称或者图片为空')
        }
      })
    },

    delImage () {
      this.$Modal.confirm({
        title: '删除图片',
        content: '确定删除图片吗？',
        onOk: () => {
          this.base64Src = ''
        }
      })
    },
    delSku (index) {
      this.$Modal.confirm({
        title: '删除sku',
        content: '确认删除这个sku吗？',
        onOk: () => {
          this.list.splice(index, 1)
          this.blobData.splice(index, 1)
          this.base64Data.splice(index, 1)
        }
      })
    },

    handleBeforeUpload (e) {
      /*
      * sku图片
      * */
      this.$refs.crop.setImage({e, name: 'sku'})
      return false
    },
    cropImg (data) {
      /*
      * 切图返回数据
      * */
      this.base64Src = data.imgTime
      this.nowBlob = data.blob
    },

    clearSkuData () {
      /*
      * 清除sku数据
      * 1、表单数据
      * 2、图片数据
      * 3、已添加列表数据
      * */
      this.$refs.skuForm.resetFields()
      this.list = []
      this.base64Data = []
      this.blobData = []
    }
  },
  created () {
  }
}
</script>

<style scoped>
  .list ul{
    overflow: hidden;
  }
  .list li{
    float: left;
    overflow: hidden;
    border: 1px solid #dddee1;
    padding: 4px;
    margin: 8px 8px 8px 0;
  }
  .del{
    float:left;
    margin: 0 8px 0 16px;
    line-height: 40px;
    cursor: pointer;
  }
  .del:hover{
    color: #ed3f14;
  }
  .form{
    border-top: 1px solid #dddee1;
    padding-top: 16px;
    margin-top: 16px;
  }
  .btn{
    border-top: 1px solid #dddee1;
    padding-top: 10px;
  }
  .img_list{
    float: left;
    margin-right: 10px;
    position: relative;
  }
  .img_list i{
    position: absolute;
    top: 4px;
    right: 4px;
    cursor: pointer;
  }
</style>
